<template>
	<Layout :showBack="true" :innerBottom="false">
		<template #title>我的名片</template>

		<view class="iflex column asc common-form">
			<uni-forms ref="formRef" :model="formData" :rules="rules" label-position="top">
				<uni-forms-item name="cardName" label="姓名">
					<uni-easyinput v-model="formData.cardName" placeholder="请输入姓名" :clearable="false"
						:inputBorder="false" />
				</uni-forms-item>
				<uni-forms-item name="cardPhone" label="联系方式">
					<uni-easyinput v-model="formData.cardPhone" placeholder="请输入联系方式" :clearable="false"
						:inputBorder="false" primaryColor="#FF710A" />
				</uni-forms-item>
			</uni-forms>
		</view>

		<view class="iflex column fill aic" style="margin-top: 140rpx;">
			<u-button style="{width:100%}" :custom-style="{width:'686rpx'}" type="primary" size="large"
				@click.stop="tapSubmit">生成分享码</u-button>
		</view>
	</Layout>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getAccountInfo } from '@/apis/auth';
	import { getWxUserId } from '@/utils/auth';
	const formRef = ref();
	const formData = ref({
		cardName: '',
		cardPhone: ''
	});
	const rules = ref({
		// cardName: {
		// 	rules: [
		// 		{ required: true, errorMessage: '请填写账号' },
		// 		{
		// 			minLength: 5,
		// 			maxLength: 20,
		// 			errorMessage: '账号长度在 {minLength} 到 {maxLength} 个字符',
		// 		}
		// 	]
		// },
		// cardPhone: {
		// 	rules: [
		// 		{ required: true, errorMessage: '请填写密码' },
		// 		{
		// 			minLength: 6,
		// 			maxLength: 30,
		// 			errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
		// 		}
		// 	]
		// }
	})

	function tapSubmit() {
		uni.navigateTo({
			url: `/pages/mine/share-code?wxUserId=${getWxUserId()}`,
		})
	}

	function loadData() {
		getAccountInfo().then((res) => {
			formData.value = res.data ?? {}
		});
	}

	onLoad(() => {
		loadData();
	})
</script>

<style lang="scss">
	.common-form {
		margin-top: 48rpx;
		padding: 28rpx 28rpx 8rpx 28rpx;
		width: 686rpx;
		border-radius: 8rpx;
		background: #FFF;

		:deep(.uni-forms-item__label) {
			color: #000000;
			font-size: 32rpx;
			font-weight: 500;
		}

		:deep(.uni-easyinput__content) {
			border-radius: 6rpx !important;
			background-color: #F9F9F9 !important;

			.uni-easyinput__content-input {
				height: 92rpx !important;
				border-radius: 6rpx !important;
				padding: 0 30rpx;
				background-color: #F9F9F9;
			}
		}
	}
</style>